import React, { Component } from 'react'
import { connect } from 'react-redux'
import { Form, Button } from 'antd';
import notify from "@utils/tip";
const FormItem = Form.Item;
import {
    getWarehouseExpressRegion,
    editWarehouseExpressRegion
} from '@sagas/warehouse/warehouseManagement'
import MapRangeSelector from '@common/presentational/MapRangeSelector';

@connect(state => ({
    commonExpressPlatform: state.send.commonExpressPlatform,
    warehouseExpressRegion: state.warehouseManagement.warehouseExpressRegion,
}), {
    getWarehouseExpressRegion,
    editWarehouseExpressRegion
})
class AreaSetting extends Component {

    constructor(props) {
        super(props)
        this.state = {
            changesRange: null,
        }
        this.formRef = React.createRef()

        this.getInfos = this.getInfos.bind(this)
        this.handleSubmit = this.handleSubmit.bind(this)
        this.submitForm = this.submitForm.bind(this)
        this.handleAddressInfo = this.handleAddressInfo.bind(this)
        this.changeRange = this.changeRange.bind(this)
    }

    handleAddressInfo = (rule, value, callback) => {
        if (value && !value.length) {
            callback('请选择配送范围')
        } else {
            callback()
        }
    }

    changeRange(value){
        this.setState({
            changesRange: value
        })
        return value
    }

    handleSubmit(values) {
        const { id } = this.props
        this.props.editWarehouseExpressRegion({
            id: Number(id),
            regions: values.addressInfo
        }, () => {
            notify('保存成功', 'success')
            this.getInfos()
        })
    }

    submitForm() {
        this.formRef.current?.submit()
    }
    componentDidMount() {
        this.getInfos()
    }

    getInfos() {
        const { id } = this.props
        this.props.getWarehouseExpressRegion({
            id: Number(id),
        })
    }

    render() {
        const { warehouseExpressRegion } = this.props
        const { changesRange } = this.state
        const deliver_regions = changesRange ? changesRange : (warehouseExpressRegion.regions ? warehouseExpressRegion.regions : [])
        const { longitude, latitude } = warehouseExpressRegion
        return (
            <div>
                <div className='mgt-16 ft-14 ft-clr-d'>配送范围</div>
                <Form
                    ref={this.formRef}
                    name="warehouse-edit"
                    labelCol={{ span: 0 }}
                    wrapperCol={{ span: 24 }}
                    scrollToFirstError={{
                        behavior: actions =>
                            actions.forEach(({ el, top, left }) => {
                                el.scrollTop = top - 100
                                el.scrollLeft = left
                            }),
                    }}
                    onFinish={this.handleSubmit}
                >
                    <FormItem
                        name="addressInfo"
                        shouldUpdate
                        rules={[
                            { required: true, message: '请设置配送范围', },
                            { validator: this.handleAddressInfo, },
                        ]}
                        initialValue={deliver_regions ? deliver_regions : []}
                        trigger='onsubmit'
                        getValueFromEvent={this.changeRange}
                    >
                        <MapRangeSelector
                            deliver_regions={deliver_regions}
                            longitude={longitude}
                            latitude={latitude}
                            onsubmit={this.changeRange}
                            unFailure={true}
                            canEdit={true}
                        />
                    </FormItem>
                </Form>
                <div className="bilin-web-footer">
                    <Button type="primary" onClick={this.submitForm}>保存</Button>
                </div>
            </div>
        );
    }
}

export default AreaSetting